<!doctype html>
<html class="no-js">
<head>
    <title>ZTE 中兴金融科技</title>
    {{include 'base/style.html'}}
    <link rel="stylesheet" href="{{=URL('static','swiper/css/swiper.min.css')}}">

    <link rel="stylesheet" href="{{=URL('static','module/annular/css/iconfont/iconfont.css')}}">
    <link rel="stylesheet" href="{{=URL('static','module/annular/style/reset.css')}}">
    <link rel="stylesheet" href="{{=URL('static','module/annular/style/style.css')}}">
</head>
<style>
    .chooseTitle {
        font-size: 14px;
        color: #383838;
        padding: 11px 15px 4px 15px;
        line-height: 22px;
        text-align: center
    }

    .recWords {
        font-size: 12px;
        /*color: #f7f9fa;*/
        padding: 0 15px;
        line-height: 12px;
        text-align: center;
        /*background-color: #f7f9fa*/
    }

    #invdur {
        height: 86px;
        text-align: center
    }

    .swiper-wrapper .swiper-slide-active {
        font-size: 24px;
        color: #f7a35c
    }

    .am-nav-tabs {
        border-bottom: 1px solid #ffffff;
    }

    .am-tabs-bd {
        border: 0px solid #ffffff;
    }

    .am-tabs-d2 .am-tabs-nav {
        background-color: #ffffff;
        border-bottom: 0px solid #F0F0F0;
    }

    .am-tabs-d2 .am-tabs-nav > .am-active {
        background-color: #ffffff;
    }

</style>
<body>
<div data-am-widget="list_news" class="am-list-news am-list-news-default">
    <!--列表标题-->
    <div class="am-cf">
        <!--带更多链接-->
        <a class="" style="color:#007bff">
            <h3><span class="am-icon-braille am-icon-sm" style="">&nbsp&nbsp将根据您的流动性安排和风险偏好，设计专属于您的资产配置方案：</span></h3>

        </a>
    </div>


    <div class="am-list-news-bd">
        <ul class="am-list">

            <li class="am-g am-list-item-dated">

                <div class="chooseTitle">大致投资期限</div>
                <div id="recWords" class="recWords">(建议持有6个月以上)</div>
                <div>
                    <div class="swiper-container swiper-container-horizontal" id="invdur" value="M">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide swiper-slide-prev" value="S">短期<br>0-1年</div>
                            <div class="swiper-slide swiper-slide-active" value="M">中期<br>1-3年</div>
                            <div class="swiper-slide swiper-slide-next" value="L">长期<br>3年以上</div>
                        </div>
                        <div class="s-slide-next"></div>
                        <div class="s-slide-prev"></div>
                    </div>
                </div>

            </li>
            <li class="am-g am-list-item-dated">


                <a href="{{=URL('question')}}" class="am-list-item-hd ">
                    <h1><span class="am-badge am-badge-primary am-radius"><span
                            class="am-icon-retweet am-icon-sm"></span></span>
                        <span class="am-icon-sm " style="color:#000000">
                              <strong>&nbsp&nbsp风险承受类型：
                                  <span class="am-badge am-badge-success am-round am-text-lg">平衡型</span>
                              </strong>
                          </span>
                    </h1>
                    <!--<div class="am-list-item-text" style="text-indent:4em;margin-top:1em;">查看我的专属资产配置方案</div>-->
                    <span class="am-list-date am-icon-angle-right am-icon-sm"></span>

                    <div class="" style="width: 100%; text-indent:4em;margin-top:1em;color:#000000">
                        <strong>专属配置</strong><span class="am-text-sm" style="color: #999;">(仅做参考不作为投资建议。09-23)</span>
                    </div>
                    <div class="" style="width: 100%;text-indent:4em;margin-top:1em;color:#000000"><span><strong>"建议高配货基，适当配置债基，低配股基"</strong></span>
                    </div>
                </a>


            </li>
            <li class="am-g am-list-item-dated">
                <div class="chooseTitle " style="color:#007bff">增投金额(元)<span
                        class="am-icon-edit am-icon-sm"></span>
                </div>
                <div class="am-center" style="width: 20em; vertical-align:middle;">
                    <p><input value="10000" style="font-weight:900" type="number"
                              class="am-input-lg am-form-field am-round" placeholder=""/></p>
                </div>


                <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
                    <ul class="am-tabs-nav am-cf">
                        <li class="am-active am-center"><a href="[data-tab-panel-0]">建议配置方案</a></li>
                        <li class=" am-center"><a href="[data-tab-panel-1]">历史业绩</a></li>
                    </ul>
                    <div class="am-tabs-bd">
                        <div data-tab-panel-0 class="am-tab-panel am-active">
                            <div id="container" style="width: 98%; height: 400px; margin: 0 auto">
                            </div>
                        </div>
                        <div data-tab-panel-1 class="am-tab-panel ">
                            <div id="container_his" style="width: 98%; height: 400px; margin: 0 auto">
                            </div>
                        </div>
                    </div>
                </div>
                <button id="configure" type="button" class="am-btn-block am-btn am-btn-primary ">查看资产配置方案</button>

            </li>
        </ul>
    </div>

</div>


{{include 'base/navbar.html'}}
{{include 'base/jsFile.html'}}
<script src="{{=URL('static','swiper/js/swiper.min.js')}}"></script>
<script src="{{=URL('static','highcharts/highcharts.js')}}"></script>
<script type="text/javascript">
    var swiper = new Swiper(".swiper-container", {
        pagination: "",
        slidesPerView: "auto",
        nextButton: ".s-slide-next",
        prevButton: ".s-slide-prev",
        centeredSlides: true,
        maxFontSize: 22,
        minFontSize: 18,
        paginationClickable: true,
        initialSlide: 1,
        onSlideChangeEnd: function (swiper) {
            var sliders = swiper.slides;
            var sliderVal;
            for (var i = 0; i < sliders.length; i++) {
                if (sliders[i].className == "swiper-slide swiper-slide-active") {
                    sliderVal = sliders[i].getAttribute("value");
                    if (sliderVal == "S") {
                        document.getElementById("recWords").style.color = "#c9a369"
                    } else {
                        document.getElementById("recWords").style.color = "#F7F9FA"
                    }
                    break
                }
            }
//        changeInv(sliderVal);
//        var tkdata = "zha001001";
//        pageClickAppLog(tkdata)
        }
    });


    $(function () {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                spacing: [100, 0, 40, 0]
            },
            title: {
                floating: true,
                text: '<span class="am-text-sm" style="color: #999;">资产配比总额(元)</span><br/>' +
                '<span>10,000.00</span>'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                    showInLegend: false,
                }
            },
            series: [{
                type: 'pie',
                innerSize: '80%',
                name: '资产配比',
                data: [
                    {name: '货基', y: 64.0},
                    ['债基', 29.0],
                    {
                        name: '股基',
                        y: 7.0,
                        sliced: true,
                        selected: true
                    }
                ]
            }]
        }, function (c) {
            // 环形图圆心
            var centerY = c.series[0].center[1],
                titleHeight = parseInt(c.title.styles.fontSize);
            c.setTitle({
                y: centerY + titleHeight / 2
            });
            chart = c;
        });


        var title = {
            text: null
        };
        var subtitle = {
            text: '',
        };
        var xAxis = {
            categories: ['2011-01', '2011-02', '2011-03', '2011-04', '2011-05', '2011-06',
                '2011-07', '2011-08', '2011-09', '2011-10', '2011-11', '2011-12']
        };
        var yAxis = {
            title: {
                text: null
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]

        };

        var tooltip = {
            valueSuffix: '%',
            crosshairs: {
                width: 2,
                color: '#f7a35c',
                dashStyle: 'shortdot'
            }
        }

        var legend = {
            align: 'right',
            verticalAlign: 'top',
            y: 0

        };
        var series = [
            {
                name: '策略',
                data: [-0.2 * 0.01, 0.8 * 0.01, 5.7 * 0.01, 11.3 * 0.01, 17.0 * 0.01, 22.0 * 0.01, 24.8 * 0.01,
                    24.1 * 0.01, 20.1 * 0.01, 14.1 * 0.01, 8.6 * 0.01, 2.5 * 0.01],
                zones: [{
                    dashStyle: 'dot'
                }]
            },
            {
                name: '基准',
                data: [3.9 * 0.01, 4.2 * 0.01, 5.7 * 0.01, 8.5 * 0.01, 11.9 * 0.01, 15.2 * 0.01, 17.0 * 0.01,
                    16.6 * 0.01, 14.2 * 0.01, 10.3 * 0.01, 6.6 * 0.01, 4.8 * 0.01],
                zones: [{
                    dashStyle: 'dot'
                }]

            }
        ];

        var json = {};

        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;

        $('#container_his').highcharts(json);

    });


    $("#configure").click(function () {
        window.location.href = "{{=URL('configure')}}"
    });


</script>

</body>
</html>